<?php

/* @var $this yii\web\View */
//$this->registerCssFile('/css/goodsdetail/goodsdetail.css?v=0.0.1');
$this->registerJsFile('/js/tools.js?v=1.0.1');
$this->registerJsFile('/js/goods/detail.js?v=1.0.5');

?>
<link rel="stylesheet"  href="/css/goodsdetail/goodsdetail.css">
<script type="text/javascript" src="/js/qrcode.min.js"></script>
<input type="hidden" id="first_cate" value="<?= $data['first_cate']?>"/>
<div class="layui-container mt40">
	<div class="layui-row layui-col-space30">
		<div class="layui-col-md6">			
			<div class="detail-photo">
			<div class="swiper-container  gallery-top">
			    <div class="swiper-wrapper">
			      <?php foreach($data['imgs']  as $img){ ?>
					<div class="swiper-slide" style="background:#f3f5f8  url(<?= $backend_server.$img['src'] ?>)">
			       </div>
			      <?php } ?>
			    </div>
			   <!-- <div class="detail-next skewing-y layui-icon">&#xe602;</div>
			    <div class="detail-prev skewing-y layui-icon">&#xe603;</div> -->
			  </div>
			  <div class="swiper-container gallery-thumbs">
			    <div class="swiper-wrapper">
			      <?php foreach($data['imgs']  as $img){ ?>
			      	<div class="swiper-slide" style="background:#f3f5f8 url(<?= $backend_server.$img['src'] ?>)">
			      	 </div>
			      <?php } ?>	
			    </div>
			  </div>
		  </div>
			  
		</div>
		<div class="layui-col-md6">
			<div class="bui-box-align-middle">
				<div class="span1">
					<div class="f20 fb"><?= $data['name'] ?></div>
				</div>
			</div>	
		
		 <?php if($data['first_cate'] == 1){ ?>
			<div class="bui-box-align-middle mt20 ">
				<div class="info">位置租金：</div>
				<div class="span1 ml15">
					 <div class="red"> <span class="f18" id="price"><?= $data['price'] ?></span><span class="ml">元/月</span></div> 					
				</div>
				<div class="info ml30">安装维护：</div>
				<div class="span1 ml15">
					 <div class="red"> <span class="f18" id="install_price"><?= $data['install_price'] ?></span><span class="ml">元/月</span></div>	
				</div>
			</div>			
			<div class="bui-box-align-middle layui-form mt20">		
				<div class="info">投放周期：</div>
				<div class="span1 ml15">
					<div class="bui-box-align-middle number-box">
						<div class="span1">
							<input id="num" class="layui-input" type="text" value="3"/>
						</div>
						<div class="ml">	
							<input id="add" class="layui-icon" type="button"  value="&#xe619;" />	
							<input id="cut" class="layui-icon" type="button"  value="&#xe61a;"/>
						</div>
					</div>
				</div>
				<div class="span1 ml15">个月</div>					
			</div>				
			<div class="bui-box-align-middle mt20 ">
				<div class="info">成交总价：</div>
				<div class="span1 ml15">
					 <div class="red"> <span class="f22 fb" id="total"><?php echo ($data['price']+$data['install_price'])*3; ?></span><span class="ml">元</span></div> 						
				</div>
			</div>
			<div class="mt15 info bg-gray p10 f12">本广告位3个月起租，安装维护费可验收合格后在支付！地理位置优越，先到先得！</div>
			<div class="bui-box-align-middle mt20 ">
				<div class="span1 mr15">
					<a class="layui-btn layui-btn-fluid layui-btn-normal add-to-cart" data-havepackage="0" data-goodsid="<?= $data['id']?>">加入方案</a>
				</div>						
				<div class="span1 ml15">
					<a class="layui-btn layui-btn-fluid layui-btn-red buy-submit" data-havepackage="0" data-goodsid="<?= $data['id']?>">立即投放</a>
				</div>	
			</div>	
			 <?php } ?>
			
			<?php if($data['first_cate'] == 7){ ?>
				<div class="bui-box-align-middle mt20 ">
					<div class="info">价格：</div>
					<div class="span1 ml15">
						 <div class="red"> <span class="f18" id="price"><?= $data['packages'][0]['price'] ?></span><span class="ml">元</span></div> 					
					</div>
				</div>
                                <div class="bui-box-align-middle mt20 ">
					<div class="info">套餐：</div>
					<div class="span1 ml15">
						<?php foreach($data['packages']  as $package_key => $package){ ?>
						<span class="package-item <?=$package_key==0?'package-selected':''?>" data-id="<?=$package['id']?>" data-price="<?=$package['price']?>"><?=$package['name']?></span>
						<?php } ?>
					</div>
				</div>	
				<div class="bui-box-align-middle layui-form mt20">		
					<div class="info">数量：</div>
					<div class="span1 ml15">
						<div class="bui-box-align-middle number-box">
							<div class="span1">
								<input id="num" class="layui-input" type="text" value="1"/>
							</div>
							<div class="ml">	
								<input id="add" class="layui-icon" type="button"  value="&#xe619;" />	
								<input id="cut" class="layui-icon" type="button"  value="&#xe61a;"/>
							</div>
						</div>
					</div>
					<div class="span1 ml15">件</div>					
				</div>				
				<div class="bui-box-align-middle mt20 ">
					<div class="info">总价：</div>
					<div class="span1 ml15">
						 <div class="red"> <span class="f22 fb" id="total"><?= $data['packages'][0]['price'] ?></span><span class="ml">元</span></div> 						
					</div>
				</div>
				<div class="bui-box-align-middle mt20 ">
					<div class="span1 mr15">
						<a class="layui-btn layui-btn-lg layui-btn-fluid layui-btn-red buy-submit" data-havepackage="1" data-goodsid="<?= $data['id']?>">立即购买</a>
					</div>						
					<div class="span1 ml15">
                        <a class="layui-btn layui-btn-lg layui-btn-fluid layui-btn-warm add-to-cart" data-havepackage="1" data-goodsid="<?= $data['id']?>"><i class="iconfont tianchongxing f22 mr10"></i> 加入购物车</a>
					</div>
				</div>	
			 <?php } ?>				
			
			<div class="bui-box-align-middle mt15 p20 border">
				<div class="user-img content">
					<img class="headimg" src="/userhead\14\1592557615.png">
				</div>
				<div class="span1 ml15">
					<h1 class="f18">会飞的小鸭子</h1>
					<p class="mt10">
						<a href="javascript:" class="layui-btn layui-btn-xs layui-btn-normal layui-btn-radius pl20 pr20"><i class="layui-icon">&#xe611;</i> 联系TA</a>
					</p>
				</div>	<div class="span1 ml15">
					<div id="qrcode"></div>
				</div>	
				<div>					
					
				</div>
			</div>
		</div>
	</div>		
</div>


<div class="layui-container mt40">
	<div class="f26 detail-class">媒体信息</div>
	<div class="block mt15">
		<ul class="attrs-box">
			<li>
				所在地区
			</li>
			<li>
				<?= $data['region_area'] ?>
			</li>
			<li>
				媒体地址
			</li>
			<li>
				<?= $data['address'] ?>
			</li>
			<?php foreach($data['attrs']  as $attr){ ?>
			<li>
				<?= $attr['name'] ?>
			</li>
			<li>
				<?= $attr['val'] ?>
			</li>
			<?php } ?>	 
		</ul>			
	</div>
</div>
<div class="layui-container mt40 media-monitor">
	<div class="f26 detail-class">上刊监测</div>
	<div class="f12 text-r">
		<span class="p layui-bg-black">已投放</span>
		<span class="p layui-bg-green">投放中</span>
		<span class="p layui-bg-red">待投放</span>
		<span class="p layui-bg-blue">有档期</span>
	</div>
	<div class="block border p30 mt15">
		  <div class="bui-box f14">
			  <div class="fb">2020</div>
			  <div class="span1 ml15 mr15 mt">
				<ul class="mean timeline">
					<li class="text-c">
						<div class="p layui-bg-black"></div>
						<p class="mt10">1月</p>
					</li>
					<li class="text-c">
						<div class="p layui-bg-black"></div>
						<p class="mt10">2月</p>
					</li>
					<li class="text-c">
						<div class="p layui-bg-black"></div>
						<p class="mt10">3月</p>
					</li>
					<li class="text-c">
						<div class="p layui-bg-black"></div>
						<p class="mt10">4月</p>
					</li>
					<li class="text-c">
						<div class="p layui-bg-black"></div>
						<p class="mt10">5月</p>
					</li>
					<li class="text-c">
						<div class="p layui-bg-green"></div>
						<p class="mt10">6月</p>
					</li>
					<li class="text-c">
						<div class="p layui-bg-red"></div>
						<p class="mt10">7月</p>
					</li>
					<li class="text-c">
						<div class="p layui-bg-red"></div>
						<p class="mt10">8月</p>
					</li>
					<li class="text-c">
						<div class="p layui-bg-red"></div>
						<p class="mt10">9月</p>
					</li>
					<li class="text-c">
						<div class="p layui-bg-red"></div>
						<p class="mt10">10月</p>
					</li>
					<li class="text-c">
						<div class="p layui-bg-blue"></div>
						<p class="mt10">11月</p>
					</li>
					<li class="text-c">
						<div class="p layui-bg-blue"></div>
						<p class="mt10">12月</p>
					</li>
				</ul>
			  </div>
		  </div> 
	</div>
	<div class="layui-tab layui-tab-brief mt30" lay-filter="docDemoTabBrief">
	  <ul class="layui-tab-title mean bg-gray">
		<li class="layui-this">投放前</li>
		<li>上刊验收</li>
		<li>中途监测</li>
		<li>投放结束</li>
	  </ul>	  
	  <div class="layui-tab-content">
		<div class="layui-tab-item layui-show">
			<div class="layui-row mt15 layui-col-space20"  id="layer-photos-demo">
				<?php foreach($data['imgs']  as $img){ ?>
				<div class="layui-col-xs6 layui-col-md3">
					<div class="img-box img-box-sm">
						<img src="<?= $backend_server.$img['src'] ?>">
					</div>
				</div>
				<?php } ?>
			</div>
		</div>
		<div class="layui-tab-item">
			<div class="layui-row mt15 layui-col-space20">
				<?php foreach($data['imgs']  as $img){ ?>
				<div class="layui-col-xs6 layui-col-md3">
					<div class="img-box img-box-sm">
						<img src="<?= $backend_server.$img['src'] ?>">
					</div>
				</div>
				<?php } ?>
			</div>
		</div>
		<div class="layui-tab-item">
			<div class="layui-row mt15 layui-col-space20">
				<?php foreach($data['imgs']  as $img){ ?>
				<div class="layui-col-xs6 layui-col-md3">
					<div class="img-box img-box-sm">
						<img src="<?= $backend_server.$img['src'] ?>">
					</div>
				</div>
				<?php } ?>
			</div>
		</div>
		<div class="layui-tab-item">
			<div class="layui-row mt15 layui-col-space20">
				<?php foreach($data['imgs']  as $img){ ?>
				<div class="layui-col-xs6 layui-col-md3">
					<div class="img-box img-box-sm">
						<img src="<?= $backend_server.$img['src'] ?>">
					</div>
				</div>
				<?php } ?>
			</div>
		</div>
	  </div>
	</div>
	
</div>
<div class="layui-container mt40">
	<div class="f26 detail-class">媒体地图</div>
	<div class="layui-tab layui-tab-card mt15">
	  <ul class="layui-tab-title mean">
		<li class="layui-this">街景模式</li>
		<li>地图模式</li>
	  </ul>
	  <div class="layui-tab-content">
		<div class="layui-tab-item layui-show">
			<div class="detail_allmap" id="panorama"></div>
			
		</div>
		<div class="layui-tab-item">
			<div class="detail_allmap" id="allmap"></div>
		</div>
	  </div>
	</div>
</div>
	 
		 
<div class="layui-container mtb40">
	<div class="f26 detail-class">媒体图片</div>
	<div class="layui-row mt15 layui-col-space20">
		<?php foreach($data['imgs']  as $img){ ?>
		<div class="layui-col-xs6 layui-col-md3">
			<div class="img-box img-box-sm">
				<img src="<?= $backend_server.$img['src'] ?>">
			</div>
		</div>
		<?php } ?>	
	</div>
</div>

<script type="text/javascript">

var qrcode = new QRCode("qrcode", {
    text: "http://www.daye.com/goodsdetail?goods_id=4",
    width: 80,
    height: 80,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

</script>
<script type="text/javascript">
 // 百度地图API功能
 var sContent =
  "<div class='block p20'>" +
 "<div class='bui-box'>" +
 	"<div class='img-box img-box-sm'>" +
 		"<img src='<?= $data['imgs']['0']['src'] ?>'/>"+
 	"</div>"+
 	"<div class='span1 pl20'>"+
 	"<div class='f16 fb'><?= $data['name'] ?></div>"+
 	"<div class='mt15 red f18'>¥<strong class='f24'><?= $data['price'] ?></strong>元/月 </div>"+
 "</div>"+
 "</div>";
	var map = new BMapGL.Map("allmap");
	var point = new BMapGL.Point(<?= $data['longitude'] ?>,<?= $data['latitude'] ?>);
	map.centerAndZoom(point, 15);
	map.setHeading(64.5);
	map.setTilt(73);
	map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放			
	// 创建图标
	var pt = new BMapGL.Point(<?= $data['longitude'] ?>,<?= $data['latitude'] ?>);
	var myIcon = new BMapGL.Icon("/img/images/ad.png", new BMapGL.Size(30,30));
	var marker = new BMapGL.Marker(pt, {icon: myIcon}); 
	var opts = {
			width : 660,     // 信息窗口宽度
			height: 'auto',     // 信息窗口高度
			title : "媒体信息" , // 信息窗口标题
		}
	var infoWindow = new BMapGL.InfoWindow(sContent,opts);  // 创建信息窗口对象						
	marker.addEventListener("click", function(){          
	   this.openInfoWindow(infoWindow);
	   //图片加载完毕重绘infowindow	   
	});	
	map.addOverlay(marker);// 将标注添加到地图中
</script>
<script type="text/javascript">	
	 //全景图展示
	var panorama = new BMap.Panorama('panorama');
	panorama.setPosition(new BMap.Point(<?= $data['longitude'] ?>,<?= $data['latitude'] ?>)); 
	//根据经纬度坐标展示全景  经纬度必须是在路上的，要不加载不出来
	panorama.setPov({ heading: -60, pitch: 6 });
	//角度---       heading值自己调
	//heading 水平方向角度，pitch 垂直方向角度 

</script>